<template>
    <div class="order-goods-info">
        <!-- 订单商品信息 -->
        <OrderPanel v-loading="loading">
            <template #header> 商品信息</template>
            <template #main>
                <div class="goods-info">
                    <div class="desc">
                        <span>图片</span>
                        <span>商品信息</span>
                        <span>单价</span>
                        <span>数量</span>
                        <span>小计</span>
                    </div>
                    <div class="goods" v-for="goods in cartList">
                        <div
                            class="img"
                            @click="$router.push(`/goods/${goods.goods_id}`)"
                        >
                            <el-image
                                style="width: 80px; height: 80px"
                                fit="cover"
                                :src="goods.goods_picture"
                            />
                        </div>
                        <div
                            class="info"
                            @click="$router.push(`/goods/${goods.goods_id}`)"
                        >
                            <span>{{ goods.goods_name }}</span>
                            <span>{{ goods.goods_desc }}</span>
                        </div>
                        <div class="price-and-number">
                            <div class="price">￥{{ goods.goods_price }}</div>
                            <div class="number">{{ goods.goods_num }}</div>
                            <div class="total-price">
                                <span style="color: red; font-size: 16px"
                                    >￥{{
                                        goods.goods_price * goods.goods_num
                                    }}</span
                                >
                            </div>
                        </div>
                        <hr />
                    </div>
                </div>
            </template>
        </OrderPanel>
    </div>
</template>

<script setup>
import OrderPanel from './order-panel.vue'
import { onMounted, ref } from 'vue'
import { findGoodsById } from '@/apis/goods'
const cartList = ref([])
let loading = ref(true)
const { orderGoodsINfo } = defineProps(['orderGoodsINfo'])
onMounted(() => {
    cartList.value = []
    orderGoodsINfo.forEach(e => {
        findGoodsById(e.goods_id).then(res => {
            cartList.value.push(Object.assign(e, res))
            loading.value = false
        })
    })
})
</script>

<style lang="scss" scoped>
.goods {
    display: flex;
    .info {
        display: flex;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        margin-left: 100px;
        font-size: 16px;
        > span {
            &:nth-child(2) {
                font-size: 14px;
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    .price-and-number {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 300px;
        margin-left: 200px;
        .price {
            font-size: 16px;
            color: red;
        }
        .number {
            font-size: 16px;
            margin-left: 230px;
        }
        .total-price {
            margin-left: 170px;
        }
    }
    .img {
        cursor: pointer;
        padding: 10px;
    }
    transition: all 0.3s ease;
    &:hover {
        background-color: rgba(229, 228, 228, 0.58);
    }
}
.desc {
    font-size: 16px;
    color: rgb(134, 133, 131);
    > span {
        &:nth-child(1) {
            margin-left: 35px;
        }
        &:nth-child(2) {
            margin-left: 190px;
        }
        &:nth-child(3) {
            margin-left: 293px;
        }
        &:nth-child(4) {
            margin-left: 230px;
        }
        &:nth-child(5) {
            margin-left: 160px;
        }
    }
}
</style>
